import type { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import SphereImageGallery from './SphereImageGallery';

// 示例图片URL
const sampleImages = [
  'https://picsum.photos/200/200?random=1',
  'https://picsum.photos/200/200?random=2',
  'https://picsum.photos/200/200?random=3',
  'https://picsum.photos/200/200?random=4',
  'https://picsum.photos/200/200?random=5',
  'https://picsum.photos/200/200?random=6',
  'https://picsum.photos/200/200?random=7',
  'https://picsum.photos/200/200?random=8',
];

const meta: Meta<typeof SphereImageGallery> = {
  title: 'Components/SphereImageGallery',
  component: SphereImageGallery,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component: '一个3D球形图片展示组件，支持鼠标拖拽旋转，图片整齐排列成球形。当图片数量不足时会自动重复展示。',
      },
    },
  },
  argTypes: {
    images: {
      description: '图片URL数组',
      control: { type: 'object' },
    },
    minImages: {
      description: '最小展示图片数量',
      control: { type: 'number', min: 1, max: 50 },
    },
    radius: {
      description: '球体半径（像素）',
      control: { type: 'number', min: 100, max: 500 },
    },
    imageSize: {
      description: '图片尺寸（像素）',
      control: { type: 'number', min: 50, max: 200 },
    },
    autoRotateSpeed: {
      description: '自动旋转速度（0-1）',
      control: { type: 'range', min: 0, max: 1, step: 0.1 },
    },
    className: {
      description: '自定义类名',
      control: { type: 'text' },
    },
  },
  args: {
    images: sampleImages,
    minImages: 12,
    radius: 200,
    imageSize: 100,
    autoRotateSpeed: 0.2,
  },
};

export default meta;
type Story = StoryObj<typeof SphereImageGallery>;

// 基础用法
export const Default: Story = {
  render: (args) => (
    <div className="w-full max-w-4xl">
      <SphereImageGallery {...args} />
    </div>
  ),
};

// 少量图片（自动重复）
export const FewImages: Story = {
  args: {
    images: sampleImages.slice(0, 3),
    minImages: 12,
  },
  render: (args) => (
    <div className="w-full max-w-4xl">
      <SphereImageGallery {...args} />
      <div className="mt-4 text-sm text-gray-600 text-center">
        只有3张图片，但会自动重复到12张来形成完整的球体
      </div>
    </div>
  ),
};

// 大球体
export const LargeSphere: Story = {
  args: {
    radius: 300,
    imageSize: 120,
    minImages: 20,
  },
  render: (args) => (
    <div className="w-full max-w-6xl">
      <SphereImageGallery {...args} />
    </div>
  ),
};

// 小球体
export const SmallSphere: Story = {
  args: {
    radius: 150,
    imageSize: 80,
    minImages: 8,
  },
  render: (args) => (
    <div className="w-full max-w-2xl">
      <SphereImageGallery {...args} />
    </div>
  ),
};

// 快速旋转
export const FastRotation: Story = {
  args: {
    autoRotateSpeed: 0.8,
  },
  render: (args) => (
    <div className="w-full max-w-4xl">
      <SphereImageGallery {...args} />
      <div className="mt-4 text-sm text-gray-600 text-center">
        自动快速旋转中...
      </div>
    </div>
  ),
};

// 无自动旋转
export const NoAutoRotation: Story = {
  args: {
    autoRotateSpeed: 0,
  },
  render: (args) => (
    <div className="w-full max-w-4xl">
      <SphereImageGallery {...args} />
      <div className="mt-4 text-sm text-gray-600 text-center">
        需要手动拖拽来旋转球体
      </div>
    </div>
  ),
};

// 自定义样式
export const CustomStyled: Story = {
  args: {
    className: 'bg-gradient-to-br from-blue-400 to-purple-500 rounded-xl border-4 border-white/20',
  },
  render: (args) => (
    <div className="w-full max-w-4xl">
      <SphereImageGallery {...args} />
    </div>
  ),
};